<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8">
		<link href="../../favicon.ico" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/video-js.min.css" />
		<link rel="stylesheet" href="css/newbase.css" />
		<link rel="stylesheet" href="css/newstyle.css" />
		<link rel="stylesheet" href="css/neworder.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="js/newlayer/layer.js"></script>
		<link rel="stylesheet" href="js/newlayer/skin/layer.css" id="layui_layer_skinlayercss" style="">
		<script type="text/javascript" src="js/icheck.min.js"></script>
		<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
		<link href="js/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="https://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
		<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
		<link rel="stylesheet" href="js/select/skin/selectordie.css" />
		<link rel="stylesheet" href="js/select/skin/selectordie_theme_05.css" />
		<script type="text/javascript" src="js/select/selectordie.min.js"></script>
		<script type="text/javascript" src="js/newbase.js"></script>
		<script type="text/javascript" src="js/newLib.js"></script>
		<style>
			.myplaceholder {
				color: #999 !important;
			}
			/*兼容写法*/
			
			.business-list .item h5 {
				-webkit-border-radius: 50%;
			}
			
			.infos-box4:before {
				content: '3';
			}
		</style>
		<script>
            $(function() {
                $('input, textarea').placeholder({
                    customClass: 'myplaceholder'
                });
                $('#sendTime').selectOrDie({
                    placeholder: '立即前往'
                });
            });
            $(document).ready(function() {
                $("div#goodstype").children("a").click(function() {
                    $("div#goodstype").children("a").removeClass("selected");
                    $(this).addClass("selected");
                    $("#note").attr("placeholder", $(this).attr("data-desc"));
                });

            });
		</script>
		<!--[if lte IE 8]>
        <style>
          .uuBusi .ucard .tag{ width: 82%;}
          .uuBusi .ucard .tag.category{
             padding-bottom:20px;
          }
          .product .item .col-left{
            top:0;
          }
            input.help-chk{
                display: block !important;
                float: left;
                margin: 0 15px;
            }
            .help-chk-label:before {
                display: none;
            }
            .secNav .business-list .item.active h5{
                background:transparent;
                border-color:transparent;
            }
        </style>
    <![endif]-->
	</head>

	<body class="uu-replace-body">
		<div class="navigation animated">
			<script type="text/javascript" src="https://api.map.baidu.com/api?ak=dZjnRr2t8nBpGswyCB731AFD&v=2.0&s=1"></script>
			<div id="allmap" style="display:none;"></div>
			<div class="nav-wrap">
				<h1 class="logo">
            <a href="javascript:;"><img src="images/UU-logo.png" alt="uu-logo" height="75px"></a>
        </h1>
				<div class="nav">
					<ul class="nav-list clearfix">
						<li>
							<a href="index.htm" title="首页">首页</a>
						</li>
						<li>
							<a href="order_taking.html" title="订单大厅">订单大厅</a>
						</li>
						<li class="active">
							<a href="Buy.htm" title="在线下单">在线下单</a>
						</li>
						<li>
							<a href="myOrder.html" title="我的订单">我的订单</a>
						</li>

					</ul>
					<div style="clear:both;"></div>
				</div>
				<div class="button-group">
					<ul class="button-list welcome" id="userinfo">
						<li>
							<a href="login.html" class="port fl"><img src="images/port.png" width="22" height="22" style="margin-right: 10px;" />登录</a>
						</li>
						<li style="display: none;">
							<p class="username fl">欢迎您，<span id="userMobile"></span>
							</p>
							<a class="loginout" href="javascript:order.loginOut()">退出</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="uu-replace-main clearfix">
			<div class="order-nav">
				<!--四个功能样式-->
				<div class="secNav">
					<div class="business-list">
						<a href="buy.html" title="帮我买">
							<div class="item active">
								<h5><i class="iconfont">&#xe606;</i></h5>
								<p>帮我买</p>
								<!-- <span class="order-sj"></span> -->
							</div>
						</a>
						<a href="Send.html" title="帮我送">
							<div class="item">
								<h5><i class="iconfont">&#xe601;</i></h5>
								<p>帮我送</p>
							</div>
						</a>
						<a href="Take.htm" title="帮我取">
							<div class="item">
								<h5><i class="iconfont">&#xe600;</i></h5>
								<p>帮我取</p>
							</div>
						</a>
						<a href="TakeOrder.htm" title="其他服务">
							<div class="item">
								<h5><i class="iconfont">&#xe607;</i></h5>
								<p>其他服务</p>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!-- </div> -->
			<div class="order-form">
				<div>
					<!--form区域-->
					<form action="" method="post">
						<div class="uuBusi">
							<div class="infos-box infos-box1">
								<div class="ucard" style="margin-bottom: 0;">
									<label>购买内容</label>
									<div class="tag category" id="goodstype">
										<a href="javascript:;" data-desc="请填写咖啡品类、口味、杯型等具体要求" data-id="792">咖啡</a>
										<a href="javascript:;" data-desc="填写香烟名称型号，包装要求等" data-id="797">香烟</a>
										<a href="javascript:;" data-desc="请填写酒类民称，度数要求" data-id="802">酒</a>
										<a href="javascript:;" data-desc="请填写餐品名称、份数、是否忌口等要求" data-id="807">早餐</a>
										<a href="javascript:;" data-desc="请填写餐品名称、份数、是否忌口等要求" data-id="812">夜宵</a>
										<a href="javascript:;" data-desc="请填写药品名称、厂家要求" data-id="817">药品</a>
										<a href="javascript:;" data-desc="请填写生鲜种类、重量、体积等要求" data-id="822">生鲜</a>
										<a href="javascript:;" data-desc="想买什么，就买什么！请填写商品名称和数量" data-id="787" class="selected">其他</a>
									</div>
								</div>
								<div class="ucard">
									<label>收货地址</label>
									<div class="tag">
										<input type="text" class="inp w86" autocomplete="off" name="endaddress" id="endaddress" placeholder="请填写收货地址" title="收货地址" />
									</div>
								</div>
								<div class="ucard" style="padding-bottom:30px;margin-bottom:0">
									<label>收货电话</label>
									<div class="tag">
										<input type="tel" maxlength="11" autocomplete="off" name="receivedphone" id="receivedphone" class="inp help-input" placeholder="请输入联系人手机号码" style="margin-left: 20px;">
										<span class="msg msg5">必填!</span>
										<span class="tel msg msg6">手机号码格式不正确!</span>
										 <input type="text" name="name " id="receivedpople" class="inp" placeholder="请输入联系人姓名" style="width: 24.6%; margin-left: 1px;">
										<span class="msg msg7">必填!</span>
									</div>
								</div>
							</div>
							<div class="infos-box  infos-box2" style="z-index: 9;">
								<div class="ucard">
									<label>购买地点</label>
									<div class="tag">
										<input type="text" name="startaddress" autocomplete="off" id="startaddress" class="inp w86" placeholder="请填写购买地址，若不填则代表可以在任意地点购买" title="购买地址" />
									</div>
								</div>
								<div class="ucard" style="height: 96px;">
									<label>购买要求</label>
									<div class="tag" style="position:relative;">
										<textarea autocomplete="off" class="inp w100 textarea-large required maxText" name="details" id="details" placeholder="想买什么就买什么，请输入需要购买商品的名称和数量"></textarea>
										<span class="msg msg1">必填!</span>
										<span style="position:absolute;font-size:12px;color:#bbbbbb;right:15px;bottom:0px;z-index:10;">最多200字</span>
									</div>
								</div>
								<div class="ucard" style="line-height:40px;">
									<label>购买时间</label>
									<div class="tag special help-input send-input" id="sendChoice">
										<select name="sendTime" id="sendTime">
											<option value="立即购买">立即购买</option>
											<option value="预约时间,可协商">预约时间,可协商</option>
										</select>
									</div>
								</div>
								<div class="ucard" style="line-height:40px;">
									<label>接单员性别</label>
									<div class="tag special help-input" id="genderChoice">
										<select name="" id="corridorGender">
											<option value="不限" selected="selected">不限</option>
											<option value="男">男</option>
											<option value="女">女</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="uuPay" style="z-index:6;height: 156px;">
							<div class="infos-box infos-box4" style="margin-top: 0; padding-bottom: 30px;height: 156px;">
								<div class="pay step1" style="width: 100%;">
									<div class="ucard">
										<div class="tag" style="width: 100%;">
											<label>订单价格</label>
											<input type="tel" id="price" maxlength="11" autocomplete="off" class="inp" style="width: 694px;" placeholder="请输入订单价格" />
										</div>
									</div>

									<div class="ucard" style="margin-bottom: 0;margin-left: 30%;">
										<input type="button" name="pay-sub" class="sub pay-sub" value="确认订单" id="confirmBtn" />
									</div>

								</div>
								<div class="map" id="viewmap"></div>
								<div style="clear: both;"></div>
								<!-- <div class="line-bar"></div> -->
							</div>
						</div>
						<script>
							if(window.location.pathname.indexOf('Send') > -1 || window.location.pathname.indexOf('Take.htm') > -1) {
								document.getElementById('marqueeTip').style.opacity = 1;
							}
						</script>
					</form>
				</div>
			</div>
			<div style="clear:both;"></div>
		</div>
	</body>
	<script>
        $(function () {

        $("#confirmBtn").click(function () {
				var title = "购买"+ $("#goodstype").find("a[class='selected']").eq(0).text();
				var goodsType= $("#goodstype").find("a[class='selected']").eq(0).attr("data-id");
				var receivedAddress = $("#endaddress").val();
				if (receivedAddress == ""){alert("收货地址不能为空");return;}
				var receivedPepole = $("#receivedpople").val();
				if (receivedPepole ==""){alert("请填写收货人");return;}
				var receivedPhone = $("#receivedphone").val();
				if (receivedPhone == ""){alert("请填写收货人联系电话");return;}
				var reg = /^1[34578][0-9]{9}$/; //验证规则
				if (!reg.test(receivedPhone)){
					alert("你的手机号码格式不正确");return;
				}
				var sendAddresss = $("#startaddress").val();
				var remark = $("#details").val();
				if (remark == ""){alert("请填写你的备注信息");return;}
				var sendDate = $("#sendTime").val();
				var corridorGender = $("#corridorGender").val();
				var prcie = $("#price").val();
				if(prcie == ""){alert("请填写你的订单价格")}
				console.log("receivedAddress:"+receivedAddress);
                console.log("receivedPepole:"+receivedPepole);
                console.log("sendAddresss:"+sendAddresss);
                console.log("remark:"+remark);
                console.log("sendDate:"+sendDate);
                console.log("corridorGender:"+corridorGender);
                console.log("prcie:"+prcie);
                $.ajax({
					url:"/order/add",
					dataType:"json",
					type:"post",
					data:{
                        "oType":1,
						"price":prcie,
						"title":title,
						"remark":remark,
						"corridorGender":corridorGender,
						"goodsType":goodsType,
						"receivedPepole":receivedPepole,
						"receivedPhone":receivedPhone,
						"receivedAddress":receivedAddress,
						"sendDate":sendDate,
						"sendAddresss":sendAddresss
					},
					success:function (data) {
						alert(data);
                    }
				})
            })
        })
	</script>
</html>